window.addEventListener("load", function () {
    //---------------- 返回顶部 ---------------------
    const toTop = $(".toTop")
    toTop.onclick = function () {
        scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };
    //返回顶部按钮显示,隐藏
    // 窗口滚动事件
    window.onscroll = function () {
        if (scrollY >= 300) {
            toTop.style.display = "block";
        } else {
            toTop.style.display = "none";
        }
    };

    /* --------------------创建数据---------------------------*/
    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    // ul内容默认为空
    $("#option").innerHTML = ""
    // 遍历数据,渲染到ul里
    data.forEach(function (v, i) {
        $("#option").innerHTML = `
            <li class="blue">
            <img src="../images/wechat-white.png" alt="">
			<p>扫码关注</p>
            扫码测试</li>
		    <li date-index=${i}>${data[0].times}次</li>
			<li>${data[1].times}次</li>
			<li>${data[2].times}次</li> 
        `
    })
    // ------------点击激活样式,渲染价格-------------
    // 遍历li
    $("#option>li").forEach(function (v, i) {
        // 点击时先清除样式,再添加激活样式
        v.addEventListener("click", function (each) {
            // 类名不包含blue的标签,才执行操作
            if (!each.target.classList.contains("blue")) {
                // 清除样式
                $("#option>li").forEach(function (v) {
                    v.classList.remove("active")
                })
                // 渲染价格
                $("#price").innerHTML = `¥${data[i - 1].price}`
                $("#money").innerHTML = `(约${data[i - 1].unitPrice}元/次),仅限企业实名购买`
            }
            // 添加激活样式
            this.classList.add("active")
        })
    })


    // -------------------------选项卡部分--------------------------
    // $("#APINav li").forEach(function (v, i) {
    //     // 给li绑定事件
    //     v.addEventListener("click", function () {
    //         // 清除li样式
    //         $("#APINav li").forEach(function (v) {
    //             v.classList.remove("active")
    //         })
    //         // 清除div样式
    //         $("#detailBox div").forEach(function (v) {
    //             v.classList.remove("on")
    //         })
    //         // 添加激活样式
    //         this.classList.add("active")
    //         // 按照索引添加样式
    //         $("#detailBox div")[i].classList.add("on")
    //     })
    // })

    // 创建一个对象option
    const option = {
        // 选择器
        liSelector: "#APINav li",
        divSelector: "#detailBox div",
        // 类名
        liClassName: "active",
        divClassName: "on",
        // index: 0
    }
    // 调用tab选项卡函数
    tabChange(option)











})//窗口加载事件 尾巴